<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="font-awesome-4.4.0/css/font-awesome.min.css" rel="stylesheet" />
		<link href="css/menu_user.css" rel="stylesheet" />
		<link href="css/menu_filter.css" rel="stylesheet" />
		<link href="css/main.css" rel="stylesheet" />
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link href="css/bootstrap-slider.min.css" rel="stylesheet" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lcZA6Wfuiqjfpa6TdhYsEHyLoY6WD0Ny"></script>
		<style>
			.mui-off-canvas-left,
			.mui-off-canvas-right {
				width: 90%;
				background: #EFEFF4;
			}
		</style>
	</head>

	<body>
		<!-- 主界面移动、菜单不动 -->
		<div class="mui-off-canvas-wrap mui-draggable">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-left" id="offCanvasSide">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容(左侧) -->
						<ul class="mui-table-view mui-header">
							<li class="mui-table-view-cell mui-media mui-header">
								<img class="mui-media-object mui-pull-left mui-logo" src="images/fdd-logo.png">
								<div class="mui-media-body">
									<a href="#">注册</a>
									<a href="#">登录</a>
								</div>
							</li>
						</ul>
						<ul class="mui-table-view mui-list">
							<li class="mui-table-view-cell mui-media">
								<a href="#">
									<img class="mui-media-object mui-pull-left mui-icon" src="images/history_icon.png">
									<div class="mui-media-body">
										<h5>历史记录</h5>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="#">
									<img class="mui-media-object mui-pull-left mui-icon" src="images/recent-search_icon.png">
									<div class="mui-media-body">
										<h5>最近搜索</h5>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="#">
									<img class="mui-media-object mui-pull-left mui-icon" src="images/collect_icon.png" style="padding:.15rem;">
									<div class="mui-media-body">
										<h5>我的收藏</h5>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</aside>

			<aside class="mui-off-canvas-right" id="offCanvasSide2">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 （右侧）-->
						<div class="mui-content ">
							<div class="mui-content-padded">
								<ul class="mui-pagination mui-filter">
									<li class="">
										<a href="#">
											刚需
										</a>
									</li>
									<li class="">
										<a href="#">
											过冬
										</a>
									</li>
									<li class="">
										<a href="#">
											度假
										</a>
									</li>
									<li class="">
										<a href="#">
											投资
										</a>
									</li>
								</ul>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-6">
									<li class="mui-table-view-cell mui-left">
										是否精装：
										<div class="mui-switch mui-switch-blue mui-switch-mini mui-active" style="background-color:#017486;border:2px solid #017486;">
											<div class="mui-switch-handle"></div>
										</div>
									</li>
								</div>
								<div class="mui-col-xs-6">
									<li class="mui-table-view-cell mui-right">
										<input name="style" type="checkbox" value="right-none">
										<span>优先</span>
									</li>
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-9">
									<li class="mui-table-view-cell mui-left">
										预算总价：
										<label>30万~500万</label>

									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell mui-right">
										<input name="style" type="checkbox" value="right-none">
										<span>优先</span>
									</li>
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-12 mui-range">
									<input id="ex1" type="text" class="span2" value="" data-slider-min="30" data-slider-max="500" data-slider-step="5" data-slider-value="[250,450]" />
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-9">
									<li class="mui-table-view-cell mui-left">
										户型面积：
										<label>20m²~2000m²</label>

									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell mui-right">
										<input name="style" type="checkbox" value="right-none">
										<span>优先</span>
									</li>
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-12 mui-range">
									<input id="ex2" type="text" class="span2" value="" data-slider-min="20" data-slider-max="2000" data-slider-step="5" data-slider-value="[250,450]" />
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-9">
									<li class="mui-table-view-cell mui-left">
										户型格局：
										<input name="style" type="checkbox" value="right-none">
										<span>不限</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell mui-right">
										<input name="style" type="checkbox" value="right-none">
										<span>优先</span>
									</li>
								</div>
							</div>

							<div class="mui-content-padded">
								<ul class="mui-pagination mui-filter-small">

									<li class="mui-active">
										<a href="#">1</a>
									</li>
									<li>
										<a href="#">2</a>
									</li>

									<li>
										<a href="#">3</a>
									</li>

									<li>
										<a href="#">4</a>
									</li>

									<li>
										<a href="#">5</a>
									</li>

									<li>
										<a href="#">5+</a>
									</li>

								</ul>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-9">
									<li class="mui-table-view-cell mui-left">
										物业类型：
										<input name="style" type="checkbox" value="right-none">
										<span>不限</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell mui-right">
										<input name="style" type="checkbox" value="right-none">
										<span>优先</span>
									</li>
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>住宅</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>公寓</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>洋房</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>商铺</span>
									</li>
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>别墅</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>loft</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell" style="padding-right: 0;">
										<input name="style" type="checkbox" value="right-none"> <span>写字楼</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell" style="padding-right: 0;">
										<input name="style" type="checkbox" value="right-none"> <span>综合体</span>
									</li>
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-6">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>酒店式公寓</span>
									</li>
								</div>
								<div class="mui-col-xs-6">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>产权式酒店</span>
									</li>
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-12">
									<li class="mui-table-view-cell mui-left">
										项目特色：
										<input name="style" type="checkbox" value="right-none">
										<span>不限</span>
									</li>
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>海景</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>湖景</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>江景</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>公园</span>
									</li>
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>山区</span>
									</li>
								</div>
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>景区</span>
									</li>
								</div>
								<div class="mui-col-xs-6">
									<li class="mui-table-view-cell">
										<input name="style" type="checkbox" value="right-none"> <span>小户型</span>
									</li>
								</div>
							</div>

							<div class="mui-table-view mui-row">
								<div class="mui-table-view-cell mui-collapse mui-col-xs-12">
									<a class="mui-navigate-right" href="#">
										临校:
										<!--<div class="mui-switch mui-switch-blue mui-switch-mini">
								<div class="mui-switch-handle"></div>
							</div>-->
									</a>
									<ul class="mui-table-view mui-table-view-chevron">
										<div class="mui-row">
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>幼儿园</span>
												</li>
											</div>
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>初中</span>
												</li>
											</div>
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>大学</span>
												</li>
											</div>
										</div>

										<div class="mui-row">
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>小学</span>
												</li>
											</div>
											<div class="mui-col-xs-8">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>高中</span>
												</li>
											</div>
										</div>
									</ul>
								</div>
							</div>

							<div class="mui-table-view mui-row">
								<div class="mui-table-view-cell mui-collapse mui-col-xs-12">
									<a class="mui-navigate-right" href="#">
										开发商:
										<!--<div class="mui-switch mui-switch-blue mui-switch-mini">
								<div class="mui-switch-handle"></div>
							</div>-->
									</a>
									<ul class="mui-table-view mui-table-view-chevron">
										<div class="mui-row">
											<div class="mui-col-xs-12">
												<li class="mui-table-view-cell">
													<input type="text" class="mui-input-clear" placeholder="请输入开发商">
												</li>
											</div>
										</div>

										<div class="mui-row">
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>万科</span>
												</li>
											</div>
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>恒大</span>
												</li>
											</div>
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>绿地</span>
												</li>
											</div>
										</div>

										<div class="mui-row">
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>鲁能</span>
												</li>
											</div>
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>碧桂园</span>
												</li>
											</div>
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>广物</span>
												</li>
											</div>
										</div>

										<div class="mui-row">
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>保利</span>
												</li>
											</div>
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>海航</span>
												</li>
											</div>
											<div class="mui-col-xs-4">
												<li class="mui-table-view-cell">
													<input name="style" type="checkbox" value="right-none"> <span>其它</span>
												</li>
											</div>
										</div>
									</ul>
								</div>
							</div>

							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-3">
									<li class="mui-table-view-cell mui-left">
										排序:
									</li>
								</div>
								<div class="mui-col-xs-9">
									<li class="mui-table-view-cell mui-select">
										<select name="">
											<option value="">不限</option>
											<option value="">最新发布</option>
											<option value="">均价从低到高</option>
											<option value="">均价从高到低</option>
											<option value="">占地面积</option>
											<option value="">开盘时间</option>
										</select>
									</li>
								</div>
							</div>
							
							<div class="mui-row mui-table-view">
								<div class="mui-col-xs-12">
									<button type="button" class="mui-btn mui-btn-blue mui-btn-block" style="background-color:#017486;">提交</button>
								</div>
							</div>

						</div>
					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->

			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav">
					<div class="mui-nav-content">
						<div class="mui-row">
							<div class="mui-col-xs-1">
								<a class="mui-icon mui-pull-left" href="#offCanvasSide">
									<i class="fa fa-navicon fa-fx"></i>
								</a>
							</div>
							<div class=" mui-col-xs-9 ">
								<div class="mui-input-row mui-search">
									<input type="search" class="mui-input-clear" placeholder="请输入楼盘名称">
								</div>
							</div>
							<div class="mui-col-xs-2 ">
								<a class="mui-icon mui-pull-right" href="#offCanvasSide2">
									<i class="fa fa-filter fa-fx"></i> <small style="font-size: 12px;margin-left:-10px;margin-top:-10px;">搜索</small>
								</a>
							</div>
						</div>
					</div>
				</header>
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<!--百度地图容器-->
						<div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>
						<div class="mui-icon-choose">
						<a href="#">
							<span class="fa-stack fa-lg">
  								<i class="fa fa-square fa-stack-2x" style="color: #fff;"></i>
  								<i class="fa fa-map-marker fa-stack-1x"></i>
							</span>
						</a>
						<a href="#">
							<span class="fa-stack fa-lg">
							  <i class="fa fa-square fa-stack-2x" style="color:#fff;"></i>
							  <i class="fa fa-list-ul fa-stack-1x"></i>
							</span>
						</a>
					</div>
					</div>
				</div>
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/bootstrap-slider.min.js"></script>
		<script type="text/javascript">
			mui.init();
			var offCanvasInner = document.querySelector('.mui-inner-wrap');
			offCanvasInner.addEventListener('drag', function(event) {
				event.stopPropagation();
			});
			var slider = new Slider('#ex1', {});
			var slider = new Slider('#ex2', {});
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
		</script>
		<script type="text/javascript">
			//创建和初始化地图函数：
			function initMap() {
				createMap(); //创建地图
				setMapEvent(); //设置地图事件
				addMapControl(); //向地图添加控件
				addMapOverlay(); //向地图添加覆盖物
			}

			function createMap() {
				map = new BMap.Map("map");
				map.centerAndZoom(new BMap.Point(110.464453, 19.825504), 12);
			}

			function setMapEvent() {
				map.enableScrollWheelZoom();
				map.enableKeyboard();
				map.enableDragging();
				map.enableDoubleClickZoom()
			}

			function addClickHandler(target, window) {
				target.addEventListener("click", function() {
					target.openInfoWindow(window);
				});
			}

			function addMapOverlay() {
				var labels = [];
				for(var index = 0; index < labels.length; index++) {
					var opt = {
						position: new BMap.Point(labels[index].position.lng, labels[index].position.lat)
					};
					var label = new BMap.Label(labels[index].content, opt);
					map.addOverlay(label);
				};
			}
			//向地图添加控件
			function addMapControl() {
				var scaleControl = new BMap.ScaleControl({
					anchor: BMAP_ANCHOR_BOTTOM_LEFT
				});
				scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
				map.addControl(scaleControl);
				var navControl = new BMap.NavigationControl({
					anchor: BMAP_ANCHOR_TOP_LEFT,
					type: BMAP_NAVIGATION_CONTROL_LARGE
				});
				map.addControl(navControl);
				var overviewControl = new BMap.OverviewMapControl({
					anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
					isOpen: true
				});
				map.addControl(overviewControl);
			}
			var map;
			initMap();
		</script>
	</body>

</html>